@extends('admin.common.main')

@section('cnt')
<nav class="breadcrumb">
	<i class="Hui-iconfont">&#xe67f;</i> 首页 
	<span class="c-gray en">&gt;</span> 用户中心 
	<span class="c-gray en">&gt;</span> 用户管理 
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i>
	</a>
</nav>

{{-- 消息提示 --}}
@include('admin.common.msg')

<div class="page-container">
	<form method="get">
		<div class="text-c"> 日期范围：
			<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" value="{{ request()->get('datemin') }}" name="datemin" class="input-text Wdate" style="width:120px;" autocomplete="off">
			-
			<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" name="datemax" value="{{ request()->get('datemax') }}" class="input-text Wdate" style="width:120px;" autocomplete="off">
			用户名：
			<input type="text" class="input-text" style="width:250px" placeholder="输入用户名" id="" name="username" value="{{ request()->get('username') }}" autocomplete="off">
			<button type="submit" class="btn btn-success radius"><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
			<a class="btn btn-primary radius" href="{{ route('admin.admin-users.index') }}"><i class="Hui-iconfont">&#xe68f;</i> 清除</a>
		</div>
	</form>
	<div class="cl pd-5 bg-1 bk-gray mt-20"> 
		<span class="l">
			<a class="btn btn-danger radius" onclick="deletedAll()">
				<i class="Hui-iconfont">&#xe6e2;</i> 批量删除
			</a> 
			<a href="{{ route('admin.admin-users.create') }}" class="btn btn-primary radius">
				<i class="Hui-iconfont">&#xe600;</i> 添加用户
			</a>
		</span> 
	</div>
	<div class="mt-20">
	<table class="table table-border table-bordered table-hover table-bg table-sort">
		<thead>
			<tr class="text-c">
				<th width="25"><input type="checkbox" name="" value=""></th>
				<th width="30">ID</th>
				<th width="70">用户名</th>
				<th width="90">手机</th>
				<th width="70">角色</th>
				<th width="70">状态</th>
				<th width="100">加入时间</th>
				<th width="150">操作</th>
			</tr>
		</thead>
		<tbody>
		@foreach($data as $item)
			<tr class="text-c">
				<td>
					{{-- 当前登录用户和删除状态的记录 不可做批量删除 过滤掉--}}
					@if(auth()->id() != $item->id && $item->deleted_at == null)
						<input type="checkbox" value="{{ $item->id }}" name="id[]">
					@endif
				</td>
				<td>{{ $item->id }}</td>
				<td><u style="cursor:pointer" class="text-primary" onclick="member_show('{{ $item->username }}','{{ route('admin.admin-users.show',$item) }}','{{ $item->id }}','360','400')">{{ $item->username }}</u></td>
				<td>{{ $item->phone }}</td>
				<td>{{ !is_null($item->role) ? $item->role->name : '' }}</td>
				<td class="td-status">
					@if($item->deleted_at == null)
						@if($item->status == 1)
							<a style="text-decoration:none" href="javascript:;" title="禁用" onClick="member_stop(this,{{ $item->id }})"><span class="label label-success radius" >已启用</span></a>
						@else
							<a style="text-decoration:none" href="javascript:;" title="启用" onClick="member_start(this,{{ $item->id }})"><span class="label label-defaunt radius" >已禁用</span></a>
						@endif
					@endif
				</td>
				<td>{{ $item->created_at }}</td>
				<td class="td-manage text-l">
					@if($item->deleted_at == null)
						<a href="javascript:;" class="label label-primary radius" onclick="admin_set_role('分配角色','{{ route('admin.admin-users.role', $item) }}')" style="text-decoration:none" >分配角色</a>
						{{-- 返回的是HTML 所以用下面的格式 --}}
						{!! $item->editBtn('admin.admin-users.edit') !!}	
					@endif
					{{-- 自己不能删除自己 --}}
					@if(auth()->id() != $item->id)
						@if($item->deleted_at != null)
							<a href="{{ route('admin.admin-users.restore',['id'=>$item->id]) }}" class="label label-warning radius">还原</a>
						@else
							{!! $item->deleteBtn('admin.admin-users.destroy') !!}	
						@endif
					@endif
				</td>
			</tr>
		@endforeach
		</tbody>
	</table>
	{{-- 分页 --}}
	{{ $data->links() }}
	</div>
</div>

@endsection

@section('js')
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript">
	// 生成一个csrf token值
	const _token = "{{ csrf_token() }}";
</script>
<script type="text/javascript">
/*用户-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*给管理员分配角色*/
function admin_set_role(title,url,id,w,h){
	layer_show(title,url,380,420);
}
/*用户-停用*/
function member_stop(obj,id){
	layer.confirm('确认要禁用吗？',function(index){
		// console.log(obj);
		// alert(id);return false;
		$.ajax({
			type: 'POST',
			url: "{{ route('admin.admin-users.stop') }}",
			data: {
				'id':id,
				'_token':_token
			},
			dataType: 'json',
		}).then(({status, msg}) => {
			if(status == 0) {
				$(obj).parent(".td-status").html('<a style="text-decoration:none" href="javascript:;" title="启用" onClick="member_start(this,'+ id +')"><span class="label label-defaunt radius" >已禁用</span></a>');
				$(obj).remove();
				layer.msg(msg,{icon: 5,time:2000});
			}
		});	
	});
}
/*用户-启用*/
function member_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		$.ajax({
			type: 'POST',
			url: "{{ route('admin.admin-users.start') }}",
			data: {
				'id':id,
				'_token':_token
			},
			dataType: 'json',
		}).then(({status, msg}) => {
			if(status == 0) {
				$(obj).parent(".td-status").html('<a style="text-decoration:none" href="javascript:;" title="禁用" onClick="member_stop(this,'+ id +')"><span class="label label-success radius" >已启用</span></a>');
				$(obj).remove();
				layer.msg(msg,{icon: 6,time:2000});
			}
		});
	});
}
/*用户-删除*/
$('.delbtn').click(function(){
	var obj = $(this)
	// 得到请求的url地址
	let url = obj.attr('href');
	layer.confirm('确认删除吗？',{
		btn:['确认删除','取消']
	}, () => {
		// 发起一个delete请求
		$.ajax({
			url, 
			data:{_token},
			type:'DELETE',
			dataType:'json'
		}).then(({status, msg})=>{		// 返回值,结构赋值
			if (status == 0) {
				// 删除当前行
				obj.parents('tr').remove();
				layer.msg(msg, {icon:1,time:2000});	//提示插件
			}
		});
	});
	//取消jQuery默认事件（a链接不要跳转）
	return false;
});

// 全选删除
// const deletedAll = () => {}	//es6 写法 
function deletedAll() {
	// 选中的用户
	let ids = $('input[name="id[]"]:checked');
	let id = [];
	// 循环
	$.each(ids, (key, val) => {	// val是dom对象 dom对象转为jQuery对象：$(dom对象)，提示这里也可以不转，直接val.val()
		id.push($(val).val());		//将input值放到id数组中
	});
	if(id.length <= 0) {
		layer.alert('请勾选要删除的用户', {
			icon: 1,
			skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
		})
	} else {
		layer.confirm('您是真的要删除选中的用户吗？', {
			btn: ['确认删除','取消'] //按钮
		}, () => {
				// 发起ajax
				$.ajax({
					url: "{{ route('admin.admin-users.delall') }}", 
					data: {id, _token},
					type: 'DELETE',
				}).then(ret=>{
					layer.msg(ret.msg,{time:2000,icon:1},()=>{
						location.reload();
					})
				});
			}
		);
	}

}
function reloadData(){
	//当前页的刷新
	location.reload()
}
</script> 
@endsection